<template>
	<view>
		<!-- 问诊缴费 -->
		<!-- 顶部用户信息卡 -->
		<UserInfoCardVue></UserInfoCardVue>
		<view class="register-payment-page">


			<!-- 挂号缴费卡片列表 -->
			<view v-for="(item, index) in dataSource" :key="index" class="section-card payment-card">
				<view @click="toPage(item)">
					<view class="payment-header">
						<view class="payment-title">{{ item.departmentName }}</view>
					</view>
					<view class="payment-content">
						<view class="payment-row">
							<text class="label">就诊医生 ：</text>
							<text class="value">{{ item.doctorName }}</text>
						</view>
						<view class="payment-row">
							<text class="label">就诊医院 ：</text>
							<text class="value">{{ item.campusName }}</text>
						</view>
						<view class="payment-row">
							<text class="label">下单时间 ：</text>
							<text class="value">{{ item.orderTime }}</text>
						</view>
						<view class="payment-row">
							<text class="label">问诊时间 ：</text>
							<text class="value">{{ item.visitTime }}</text>
						</view>
						<view class="payment-footer">
							<view class="amount">金额：<text class="amount-num">￥{{ item.payMoney }}</text></view>
							<view v-if="item.payStatus==1">
								<view v-if="noPayStatus(item)" class="start-center">
									<view class="pay-btn" @click.stop="pay(item)">去支付</view>
									<view class="pay-btn" @click.stop="toCancel(item)">取消预约</view>
								</view>
								<view v-else class="pay-btn disabled">已过期</view>
							</view>
							<view v-if="item.payStatus==3">
								<view v-if="rightVisitTime(item)" class="pay-btn" @click.stop="toRefund(item)">去退款
								</view>
							</view>
							<view v-if="item.payStatus==5">
								<view class="pay-btn disabled">已退款</view>
							</view>
							<view v-if="item.payStatus==4">
								<view class="pay-btn disabled">已取消</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<ButtonVue @click="goToRecord" :content="btnText"></ButtonVue>
			<DialogVue :show="show" @close="show=false" @confirm="confirm">
				<view class="text-center">是否确定取消当前预约？</view>
			</DialogVue>
			<DialogVue :show="showRefund" @close="showRefund=false" @confirm="confirmRefund">
				<view class="text-center">是否确定退款？</view>
			</DialogVue>
			<DialogVue :show="showPay" @close="showPay=false" @confirm="confirmPay">
				<view class="text-center">是否立即支付？</view>
			</DialogVue>
		</view>
		<LoadVue :load="load"></LoadVue>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import UserInfoCardVue from '../../../components/UserInfo/UserInfoCard.vue';
	import {
		payOrderUpdatePayStatus,
		payOrderUpdateRefund,
		selectPayOrder
	} from '../../../api/payOrder';
	import {
		listPayStatus
	} from '../../../utils/listPayStatus';
	import {
		dateFormat,
		getFutureDays,
		getFutureSeconds
	} from '../../../utils/assist';
	import ButtonVue from '../../../components/Button/Button.vue';
	import DialogVue from '../../../components/Dialog/Dialog.vue';
	export default {
		components: {
			UserInfoCardVue,
			ButtonVue,
			DialogVue,
		},
		computed: {
			...mapGetters(['userInfo', "hostApi"]),
		},
		mounted() {
			let date = new Date().getTime() - 15 * 60 * 1000
			date = new Date(date)
			this.orderTime = dateFormat("yyyy-MM-dd HH:mm:ss", date)
			this.init();
		},
		data() {
			return {
				dataSource: [],
				payStatus: 1,
				orderTime: '', //下订单时间
				show: false,
				showRefund: false,
				showPay: false,
				payOrder: {}, //支付订单
				btnText: '查看缴费记录',
				load: false
			};
		},

		methods: {
			init() {
				//paySourceType 1门诊缴费 2急诊缴费  3问诊缴费 4挂号缴费 5自助开单缴费
				// payStatus: 1,// 1 待支付，已下单 2 已超时 3支付成功 4取消 5退款
				this.load = true;
				selectPayOrder({
					patId: this.userInfo.patId,
					paySourceType: 3,
					payStatus: this.payStatus,
					orderTime: this.orderTime,
					orderBy: 'create_time desc'
				}).then(res => {
					console.log(res)
					this.dataSource = res;
					if (this.payStatus == 1) {
						this.btnText = '查看缴费记录'
					} else {
						this.btnText = '查看未支付'
					}
				}).finally(() => {
					this.load = false
				})
			},
			pay(item) {
				// 支付逻辑
				this.showPay = true;
				this.payOrder = item;
			},
			goToRecord() {
				// 跳转到缴费记录页
				this.payStatus = null;
				this.orderTime = null;
				this.payStatus = this.btnText == '查看缴费记录' ? null : 1
				if (this.payStatus == 1) {
					let date = new Date().getTime() - 15 * 60 * 1000
					date = new Date(date)
					this.orderTime = dateFormat("yyyy-MM-dd HH:mm:ss", date)
				}
				this.init()
			},
			noPayStatus(item) {
				// 当item里面的支付状态为1时，表示还未支付，
				// 再查看当前时间是否已经过期，如果已经过期，则显示已过期
				// 如果未过期，则可以支付
				if (item.payStatus == 1) {
					let second = getFutureSeconds(item.orderTime);
					// second为负数，表示是现在之前的数据，负数越大表示越久
					let num = 15 * 60 + second //如果加上15分钟还是大于0，表示可用支付
					if (num > 0) {
						return true
					} else {
						item.payStatusName = "已过期"
						return false
					}
				}
			},
			// 只有就诊时间大于今天，且已经支付的情况下，才能退款
			rightVisitTime(item) {
				let days = getFutureDays(item.visitTime);
				if (days > 0) {
					return true
				} else {
					return false
				}
			},
			// 取消预约
			toCancel(item) {
				this.show = true
				this.payOrder = item

			},
			toRefund(item) {
				this.showRefund = true;
				this.payOrder = item

			},
			confirm() {
				this.payOrder.payStatus = 4
				this.payOrder.payStatusName = "取消"
				payOrderUpdatePayStatus(this.payOrder).then(res => {
					this.goToRecord();
					this.show = false
				})
			},
			confirmRefund() {
				this.payOrder.payStatus = 5
				this.payOrder.payStatusName = "退款"
				payOrderUpdateRefund(this.payOrder).then(res => {
					console.log(res)
					this.goToRecord();
					this.showRefund = false
				})
			},
			confirmPay() {
				uni.navigateTo({
					url: '/pages/Pay/patientRegisterPay?item=' + JSON.stringify(this.payOrder)
				})
			},
			toPage(item) {
				if (item.payStatus == 3) {
					// uni.navigateTo({
					// 	url: '/pages/Home/ServePatient/PrescriptionDetail?item=' + JSON.stringify(item)
					// })
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.register-payment-page {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		min-height: 100vh;
		padding: 30rpx 20rpx 40rpx;
		position: relative;
	}

	.user-card {
		display: flex;
		align-items: center;
		background: linear-gradient(90deg, #F0FEFF 0%, #b6e0f7 85%, #F0FEFF 100%);
		border-radius: 16rpx 16rpx 0 0;
		padding: 32rpx 40rpx 24rpx;
		position: relative;
	}

	.avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-info {
		flex: 1;
		margin-bottom: 10rpx;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}

	.user-id {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.switch-user {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 6rpx;
		color: #1ec6e6;
		font-size: 24rpx;
	}

	.switch-icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 8rpx;
	}

	.section-card.payment-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 0 16px 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.payment-header {
		margin-bottom: 18rpx;
		background-image: url("/static/images/imgs/list-pay-title.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 50px;
		line-height: 40px;
		padding: 0 16px;
	}

	.payment-content {
		border-radius: 16px 16px 16rpx 16rpx;
		padding: 16px;
		background: linear-gradient(180deg, #F0FEFF 0%, #FFFFFF 97%);
		margin-top: -20px;
		box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.06);
	}

	.payment-title {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 40px;
		text-align: left;
		font-style: normal;
	}

	.title-bg {
		position: absolute;
		width: 48rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: -4rpx;
		left: 20rpx;
		z-index: 0
	}

	.payment-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.label {
		color: #888;
		font-size: 28rpx;
	}

	.value {
		color: #333;
		flex: 1;
		font-size: 28rpx;
	}

	.dashed-divider {
		height: 1rpx;
		border-top: 1rpx dashed #e0e0e0;
		margin: 24rpx 0;
		width: 100%;
	}

	.payment-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 18rpx;
	}

	.amount {
		color: #e74c3c;
		font-size: 28rpx;
		flex: 1;
	}

	.amount-num {
		font-weight: bold;
		font-size: 30rpx;
	}

	.pay-btn {
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 32rpx;
		padding: 0 38rpx;
		height: 56rpx;
		line-height: 56rpx;
		border: none;
		box-shadow: 0 2rpx 8rpx rgba(65, 207, 230, 0.15);
	}

	.pay-btn.disabled {
		background: #e5e5e5;
		color: #bbb;
		box-shadow: none;
	}

	.record-btn {
		width: 90%;
		margin: 60rpx 5% 0 5%;
		height: 88rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
		border: none;
		// position: absolute;
		// bottom: 40rpx;
		// right: 0;
	}
</style>